import React from 'react';
import styles from './Document.less';
import {Table, Tooltip} from 'antd';

const DocumentList = (props) => {

  const { documentList, documentLoading, rowSelection, onPreview, onDownload, currentPage, pageSize } = props;

  const columns = [
    { title: '序号', width: '5%', render: (text, record, index) => <span>{(index + 1) + currentPage * pageSize}</span> },
    { title: '文档名', dataIndex: 'document_name', key: 'document_name', width: '25%' },
    { title: '文档类型', dataIndex: 'document_type', key: 'document_type', width: '7%' },
    { title: '文档大小（MB）', dataIndex: 'document_size', key: 'document_size', width: '8%' },
    { title: '知识库编号', dataIndex: 'library_number', key: 'library_number', width: '11%' },
    { title: '知识摘要', dataIndex: 'document_summary', key: 'document_summary', width: '25%', render: (text, record, index) => <span title={text}>{text}</span> },
    { title: '上传时间', dataIndex: 'upload_time', key: 'upload_time', width: '11%' },
    { title: '操作', key: 'operate', width: '10%',
      render: (text, record) => (
      <span style={{padding: "0px 5px 0px 5px"}}>
        <Tooltip title={"预览文本"}>
          <a onClick={() => onPreview(record)}>
            <i className="ri-file-text-fill" style={{color: '#08c', fontSize: "20px"}}></i>
          </a>
        </Tooltip>
        &nbsp;&nbsp;&nbsp;
        <Tooltip title={"文档导出"}>
          <a onClick={() => onDownload(record)}>
            <i className="ri-file-download-fill" style={{color: 'red', fontSize: "20px"}}></i>
          </a>
        </Tooltip>
      </span>)
  }];

  return (
    <div className={ styles.listTable }>
      <Table
        bordered
        tableLayout={"auto"}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={documentList}
        pagination={false}
        loading={documentLoading}
        rowKey={record => record.id}
        scroll={{y: (window.innerHeight - 230)}}
      />
    </div>
  );
};

export default DocumentList;
